<template>
  <div class="Loading">
    <!-- Loading等待 -->
    <div class="Loading-waitfor" v-show="User.LoadingWaitPanelBoolean">
      <div class="loading-img">
        <img src="../assets/img/other/login-bg.png" class="loading-img" />
      </div>
      <!-- <span class="loading-name">虚拟实训中心平台</span> -->
      <span class="loading-name">{{ nameVal }}</span>
      <div class="loading-icon">
        <div>
          <!-- <img :src='User.SchoolImageId'> -->
          <el-image :src="User.SchoolImageId">
            <template #error>
              <div class="image-slot">
                <img :src="User.OldSchoolImageId">
              </div>
            </template>
          </el-image>
        </div>
      </div>
      <div class="Loading-Loading-Loadingwaitforbtn">
        <div class="loadint-btn" @click="LoadingCancel">取消</div>
      </div>
      <div class="Loding-text">
        <span>{{ User.LoadingStateValue }}</span>
      </div>
    </div>
    <div class="Loading-panel" v-show="User.LoadingWaitPanelBoolean === false">
      <div class="Loading-panel-img">
        <img src="../assets/img/other/login-bg.png">
      </div>
      <div class="Loading-title">
        <!-- <span>虚拟实训中心平台</span> -->
        <!-- <span>虚拟仿真实训平台</span> -->
        <span>{{ nameVal }}</span>
      </div>
      <div class="Loading-function">
        <div @click="MiniMizeProgram">
          <img src="../assets/img/other/icon--.png">
        </div>
        <div @click="ExitProgram">
          <img src="../assets/img/other/icon-exit.png">
        </div>
      </div>
      <div class="Loading-school-img">
        <div class="Loading-title-img">
          <!-- <img :src="User.SchoolImageId" style="width: 102px;"> -->
          <el-image :src="User.SchoolImageId">
            <template #error>
              <img :src="User.OldSchoolImageId">
            </template>
          </el-image>
        </div>
        <div>
          <span>{{ User.SchoolName }}</span>
        </div>
      </div>
      <div class="Loading-user-panel">
        <div>
          <div class="UserName-icon">
            <img src="../assets/img/other/icon-用户-n.png">
          </div>
          <div class="UserName-line"></div>
          <el-input v-model="User.UserName" @input="GetUserOrPass($event)"></el-input>
        </div>
        <div>
          <div class="Password-icon">
            <img src="../assets/img/other/icon-密码-n.png">
          </div>
          <div class="Password-line"></div>
          <el-input v-model="User.PassWord" show-password></el-input>
        </div>
      </div>
      <div class="Loading-Loadingbtn">
        <div class="btn" @click="UserLoading">登录
          <span class="flash-across"></span>
        </div>
      </div>

      <div class="stand-alone">
        <div class="stand_btn" @click="UserLoading_stand">离线模式
          <span class="flash-across"></span>
        </div>
      </div>

      <div class="Loading-comfunction">
        <div class="loading-checkbox-group">
          <el-checkbox-group v-model="User.checkList" @change="checkListChange">
            <el-checkbox label="自动登录"></el-checkbox>
            <el-checkbox label="记住密码"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div>
          <a href="#" class="loading-forgetpassword" @click="Retrieve">忘记密码</a>
        </div>
      </div>
      <div class="Loading-Error">
        <span>{{ User.Error }}</span>
      </div>

    </div>
    <RetrievePassword ref="RetrieveModel" />
  </div>
  <DialogComponents :DialogComponent="ComponDialogComponent" @click="ProductUpdateFns"></DialogComponents>
</template>

<script>
import DialogComponents from "@/components/compon/DialogComponents.vue";
import { Loadings, Golbal } from "@/assets/js/pubilcs";
import router from '../router'
import { defineComponent, reactive, onMounted, toRef, toRefs,ref, nextTick } from "vue";
import RetrievePassword from "./RetrievePassword";
export default defineComponent({
  name: "Loadings",
  components: {
    RetrievePassword,
    DialogComponents,
  },

  setup() {
    let selectValue = ref('')
    let nameVal = ref()
    let User = reactive({
      //用户名
      UserName: '',
      //喵面
      PassWord: '',
      //等待窗口布尔值
      LoadingWaitPanelBoolean: false,
      //等待显示的文字
      LoadingStateValue: "登录中.",
      //账户密码错误显示的
      Error: "",
      //自动登录和记住密码功能
      checkList: [],
      //登录计时器
      LoadTimer: '',
      OldSchoolImageId: require("@/assets/img/other/default.png"),
      //学校图片Id
      SchoolImageId: require("@/assets/img/other/default.png"),
      //学校名称
      SchoolName: "虚拟仿真实训中心",
    })
    //记录帐号密码的功能
    function checkListChange() {
      if (User.checkList[0] === '自动登录') {
        User.checkList.push('记住密码')
      }
    }
    async function ProducLocalStorageLoadRequest() {
      let rep = await Application.PostMessageAsync(
        Opcode.LocalStorageLoadRequest, { Key: "HengHongLoading" }
      )
      if (rep.Value !== '' && rep.Value !== null) {
        let re = JSON.parse(rep.Value)
        if (re.checState === "记住密码") {
          User.UserName = re.UserName
          User.PassWord = re.PassWord
          if (rep.SchoolImageId !== '') {
            User.SchoolImageId = "https://mix-statics.oss-cn-shanghai.aliyuncs.com/Platform/Icons/Schools/" + re.SchoolImageId + ".png"
          } else {
            User.SchoolImageId = User.OldSchoolImageId
          }
          User.SchoolName = re.SchoolName
          User.checkList.push("记住密码")
        } else if (re.checState === "") {
          User.UserName = ''
          User.PassWord = ''
          if (rep.SchoolImageId !== '') {
            User.SchoolImageId = "https://mix-statics.oss-cn-shanghai.aliyuncs.com/Platform/Icons/Schools/" + re.SchoolImageId + ".png"
          } else {
            User.SchoolImageId = User.OldSchoolImageId
          }
          User.SchoolName = re.SchoolName
        } else {
          User.UserName = re.UserName
          User.PassWord = re.PassWord
          User.checkList.push("自动登录")
          User.checkList.push("记住密码")
          if (rep.SchoolImageId !== '') {
            User.SchoolImageId = "https://mix-statics.oss-cn-shanghai.aliyuncs.com/Platform/Icons/Schools/" + re.SchoolImageId + ".png"
          } else {
            User.SchoolImageId = User.OldSchoolImageId
          }
          User.SchoolName = re.SchoolName
          //登录(判断注销登录的)
          if (Golbal.ExitLoadingBooelan === false) {
            Loadings(User, router)
          }
        }
      } else {
        User.SchoolImageId = User.OldSchoolImageId
      }
    }

    //最小化平台
    function MiniMizeProgram() {
      window.minimizedAsync()
    }
    //退出平台
    function ExitProgram() {
      window.shutdown();
    }
    //快捷方式输入账号密码
    function GetUserOrPass(event) {
      if (event === "*=") {
        User.UserName = "13812529795";
        User.PassWord = "123456";
      }
      if (event === "*-") {
        User.UserName = "19977778888";
        User.PassWord = "123456";
      }
      if (event === "*0") {
        User.UserName = "15121018981";
        User.PassWord = "123456";
      }
      if (event === "*9") {
        User.UserName = "18605882014";
        User.PassWord = "123456";
      }
      if (event === "*8") {
        User.UserName = "18571626201";
        User.PassWord = "123456";
      }
    }
    //登陆取消
    function LoadingCancel() {
      User.LoadingWaitPanelBoolean = false
      //通过清除计时器解决取消登录还进入登录页面的问题
      clearInterval(User.LoadTimer)
    }
    //判断平台是否需要更新
    // function OnPlatformUpdateSign() {
    //   console.log('有需要更新的资源');
    //   window.Application.InitializeAsync().then(date => {
    //     let rep = Application.PostMessageAsync(Opcode.PlatformCheckUpdateRequest, { VerifyMode: 0 })
    //     rep.then((message) => {
    //       if (message.Size && message.Size !== "0Byte") {

    //         setTimeout(function () {
    //           ComponDialogComponent.Dialogboolean = true
    //           ComponDialogComponent.Msg = "平台更新包大小:" + message.Size + ",是否下载更新"
    //         }, 1000);


    //       } else if (message.Size === "0Byte") {

    //         State.DetectUpdatePercent = 100

    //         setTimeout(function () {
    //           State.DetectUpdatesBoolean = false
    //           router.push({
    //             name: 'Loading',
    //           });
    //         }, 1000);


    //       } else {
    //         State.DetectUpdatePercent = 100

    //         setTimeout(function () {
    //           State.DetectUpdatesBoolean = false
    //           router.push({
    //             name: 'Loading',
    //           });
    //         }, 1000);

    //       }
    //     })
    //   })
    // }
    //用户登录
    function UserLoading() {
      if (User.UserName === '') {
        User.Error = "请输入用户名"
        return
      }
      if (User.PassWord === '') {
        User.Error = "请输入密码"
        return
      }
      //登录
      Loadings(User, router)
      // OnPlatformUpdateSign()
    }

    //单机
    function UserLoading_stand() {
      router.push({
        name: 'StandaloneMenu',
      });
    }
    //找回密码
    function Retrieve() {
      this.$refs.RetrieveModel.show();
    }
    function loadFile(name) {
      // name为文件所在位置
      let xhr = new XMLHttpRequest();
      const okStatus = document.location.protocol === "file:" ? 0 : 200;
      xhr.open("GET", name, false);
      xhr.overrideMimeType("text/html;charset=utf-8"); //默认为utf-8
      xhr.send(null);
      return xhr.status === okStatus ? xhr.responseText : null;
    }
    onMounted(() => {
      // nextTick(function(){
      //   ProducLocalStorageLoadRequest()//可以得到'changed'
      // })
      setTimeout(function () {
        ProducLocalStorageLoadRequest()
      }, 300);
      let a = loadFile("./config.txt")

      console.log('NameVersions', JSON.parse(a).Name, JSON.parse(a).Versions);
      nameVal.value = JSON.parse(a).Name
    });

    return {
      User,
      checkListChange,
      LoadingCancel,
      UserLoading,
      MiniMizeProgram,
      ExitProgram,
      GetUserOrPass,
      Retrieve,
      UserLoading_stand,
      nameVal,
    };
  },
});
</script>
<style lang="less">
.Loading {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.Loading .Loading-panel {
  position: relative;
  width: 480px;
  height: 680px;
}

.Loading-panel-img {
  width: 480px;
  height: 680px;
}

.Loading-panel-img img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}

.Loading-title {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 90%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 200;
  color: #ffffff;
  opacity: 0.5;
}

.Loading-function {
  position: absolute;
  top: 26px;
  left: 0;
  width: 94%;
  min-height: 20px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // background: #ffffff;
}

.Loading-function>div:nth-child(1),
.Loading-function>div:nth-child(2) {
  width: 30px;
  height: 100%;
  margin-left: 15px;
  z-index: 1;
  cursor: pointer;
}

.Loading-function>div:nth-child(1) img .Loading-function>div:nth-child(2) img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.Loading-school-img {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: 33%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.Loading-school-img .Loading-title-img {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loading-school-img .Loading-title-img .el-image {
  position: absolute;
  width: 25%;
  height: 100px;
}

.Loading-school-img .Loading-title-img .el-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.Loading-school-img>div:nth-child(2) {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffff;
}


.Loading-user-panel {
  position: absolute;
  top: 280px;
  left: 0;
  width: 100%;
  min-height: 140px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Loading-user-panel>div:nth-child(1),
.Loading-user-panel>div:nth-child(2) {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Loading-user-panel>div:nth-child(1) .el-input,
.Loading-user-panel>div:nth-child(2) .el-input {
  width: 320px;
  height: 40px;
}

.UserName-icon,
.Password-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  min-height: 100%;
  margin-left: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.UserName-icon img,
.Password-icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.UserName-line,
.Password-line {
  position: absolute;
  left: 136px;
  top: 12px;
  width: 2px;
  height: 19px;
  background: rgba(42, 43, 58, 1);
  z-index: 1;
}

// .UserName-icon img{
//   width: auto;
//   height: auto;
//   max-width: 100%;
//   max-height: 100%;
// }
.Loading-user-panel .el-input__inner {
  width: 320px;
  padding-left: 70px;
  background-color: #141521;
  font-size: 18px;
  font-family: Arial;
  font-weight: 400;
  color: #6581e0;
  border: 1px solid #4c4f61;
  text-align: left;
}

.Loading-comfunction {
  position: absolute;
  display: flex;
  left: 80px;
  bottom: 16px;
  width: 320px;
  height: 40px;
}

.Loading-Error {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 18px;
  bottom: 240px;
  width: 100%;
  min-height: 30px;
}

.Loading-comfunction>div:nth-child(1) {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loading-comfunction>div:nth-child(2) {
  width: 30%;
  height: 100%;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loading-comfunction .loading-forgetpassword {
  color: #a2a2ff;
  text-decoration: none;
}

.Loading-comfunction .loading-forgetpassword:hover {
  text-decoration: underline;
}

.Loading-comfunction .el-checkbox-group {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loading-comfunction .el-checkbox__label {
  font-family: Source Han Sans CN;

  font-weight: 400;
  font-size: 18px;
}

.Loading-comfunction .el-checkbox {
  width: 80px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Loading-Loadingbtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 170px;
  left: 0px;
  width: 100%;
  min-height: 60px;
}



.Loading-Loadingbtn .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  min-height: 60px;
  background: linear-gradient(90deg, #0974d8, #3d8ef1, #7c7ff8);
  border-radius: 10px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}

.Loading-waitfor {
  position: absolute;
  width: 480px;
  height: 640px;
}

.Loading-waitfor .loading-img {
  width: auto;
  height: auto;
  width: 480px;
  height: 640px;
  max-width: 100%;
  max-height: 100%;
}

.Loading-waitfor .loading-name {
  position: absolute;
  // left: 74px;
  left: 30px;
  top: 31px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 200;
  color: #ffff;
  opacity: 0.5;
}

.Loading-Loading-Loadingwaitforbtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 60px;
  left: 0px;
  width: 100%;
  min-height: 60px;
}

.Loading-waitfor .loadint-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  min-height: 60px;
  background: linear-gradient(90deg, #0974d8, #3d8ef1, #7c7ff8);
  border-radius: 10px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;

}

.Loading-waitfor .loading-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Loading-waitfor .loading-icon>div:nth-child(1) {
  width: 30%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  // animation: rotate 3s linear infinite;
}

.Loading-waitfor .loading-icon>div:nth-child(1) img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
    /*从0度开始*/
  }

  100% {
    transform: rotateZ(360deg);
    /*360度结束*/
  }
}

.Loading-waitfor .Loding-text {
  position: absolute;
  bottom: 200px;
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  // background: linear-gradient(90deg, #0974d8, #3d8ef1, #7c7ff8);
  // color: #3d8ef1;
  background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//闪光效果
// .flash-across {
//     position:absolute;
//     animation:changeImg 1s ease 0s;
//     top:0;
//     width:30%;
//     height:100%;
//     content:"";
//     background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
//     transform:skewX(-45deg);
//     animation-iteration-count:infinite;

// }
// @keyframes changeImg {
//   from {
//     left:20%;
//   }
//   0%{
//   }
//   100% {
//     left:50%;
//   }
// }
.Loading-Loadingbtn .btn {
  position: relative;
  overflow: hidden;
}

.Loading-Loadingbtn .btn::after {
  content: '';
  display: block;
  position: absolute;
  background: white;
  top: -30px;
  left: -100px;
  width: 30px;
  height: 120px;
  opacity: 20%;
  transform: rotate(-45deg);
}

.Loading-Loadingbtn .btn:hover:after {
  left: 120%;
  transition: all 1200ms cubic-bezier(0.3, 1, 0.2, 1);
  -webkit-transition: all 1200ms cubic-bezier(0.3, 1, 0.2, 1);
}

.Loading-school-img .Loading-title-img .el-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.stand-alone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0px;
  width: 100%;
  bottom: 100px;
}

.stand_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: linear-gradient(90deg, #0974d8, #3d8ef1, #7c7ff8);
  border-radius: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  width: 320px !important;
  font-size: 24px !important;
  line-height: 60px !important;
}
</style>
